<template>
	<view class="">
			<HeaderTitle :title="$t('Appraise')" :bottom="true" :lang="false" :mobile="false" :combakflag="true">
			</HeaderTitle>
		<view class="appraise-content" :dir="i18nLocale=='ug'?'rtl':''">
			<view class="box">
				<view class="big-title" style="margin-top: 20rpx;">
					<u-icon name="edit-pen" color="#45bc1b" size="35"></u-icon>
					<view class="">
						{{$t('ProductReviews')}}
					</view>
				</view>
				<view class="star-box">
					<view class="title">{{$t('QualityGoods')}}</view>
					<u-rate :count="count" active-color="#ffa902" gutter="3" inactive-color="#b2b2b2" v-model="value1"
						size="30"></u-rate>
				</view>
				<view class="star-box">
					<view class="title">{{$t('ProductPackaging')}}</view>
					<u-rate  :count="count" active-color="#ffa902" gutter="3" inactive-color="#b2b2b2" v-model="value2"
						size="30"></u-rate>
				</view>
			</view>
			<view class="box" style="margin-top: 20rpx;">
				<view class="big-title" style="margin-top: 20rpx;">
					<u-icon name="edit-pen" color="#45bc1b" size="35"></u-icon>
					<view class="">
						{{$t('DeliveryEvaluation')}}
					</view>
				</view>
				<view class="star-box">
					<view class="title">{{$t('DeliverySpeed')}}</view>
					<u-rate :count="count" active-color="#ffa902" gutter="3" inactive-color="#b2b2b2" v-model="value3"
						size="30"></u-rate>
				</view>
				<view class="star-box">
					<view class="title">{{$t('DeliveryAttitude')}}</view>
					<u-rate :count="count" active-color="#ffa902" gutter="3" inactive-color="#b2b2b2" v-model="value4"
						size="30"></u-rate>
				</view>
				<view class="remark">
					<view class="title">{{$t('Appraise')}}</view>
					<u--textarea v-model="remark_value" :placeholder="$t('PleaseFillReview')"
						border="none"></u--textarea>
				</view>
			</view>
			<view class="footer-button" @click="submit">
				{{$t('Submit')}}
			</view>
		</view>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	export default {
		components: {
			TopBar
		},
		data() {
			return {
				remark_value: '',
				value1: 0,
				value2: 0,
				value3: 0,
				value4: 0,
				count: 5
			};
		},
		methods: {
			submit() {
				uni.navigateBack();
			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.appraise-content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20rpx;

		.box {
			width: 100%;
			background-color: #fff;
			padding: 10rpx;
			border-radius: 30rpx;
			box-sizing: border-box;
		}

		.remark {
			width: 100%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}

		.big-title {
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			padding-bottom: 20rpx;

			view {
				padding: 0rpx 5rpx;
			}

			text {
				padding: 0rpx 20rpx;
				color: #b2b2b2;
			}
		}

		.star-box {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 20rpx;
			display: flex;
			align-items: center;

			.title {
				padding-right: 30rpx;
				font-size: $uni-font-size-base;
				width: 20%;
			}
		}

		.footer-button {
			width: 92%;
			height: 100rpx;
			left: 4%;
			position: fixed;
			bottom: 2%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			background-color: #15c45b;
			color: #fff;
			font-size: $uni-font-size-lg;
		}
	}
</style>